<template>
  <div class="lg-steps">
    <div class="lg-steps-line"></div>
    <div
      class="lg-step"
      v-for="index in count"
      :key="index"
      :style="{
          color: active >= index ? activeColor : defaultColor
      }"
    >
      {{ index }}
    </div>
  </div>
</template>

<script>
import './steps.css'

export default {
    name: 'LgSteps',
    props: {
        count: {  // 所有的步骤数量
            type: Number,
            default: 3
        },
        active: { // 已完成步骤
            type: Number,
            default: 1
        },
        activeColor: { // 已完成的颜色
            type: String,
            default: 'red'
        },
        defaultColor: { // 未完成的颜色
            type: String,
            default: 'green'
        }
    }
}
</script>

<style>

</style>